{% extends 'index.html' %}
{% block content %}
<div class="container-fluid add-form-list">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <div class="header-title">
                        <h4 class="card-title">添加一个题</h4>
                    </div>
                </div>
                <div class="card-body">
                    <form id="add_form" action="{% url 'exercise:add' %}" method="post">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="dob">题干</label>
                                    <input type="text" name="question" class="form-control" id="question">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>A选项</label>
                                    <input type="text" name="option_a" class="form-control" required="">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>B选项</label>
                                    <input type="text" name="option_b" class="form-control" required="">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>C选项</label>
                                    <input type="text" name="option_c" class="form-control" required="">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>D选项</label>
                                    <input type="text" name="option_d" class="form-control" required="">
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>E选项</label>
                                    <input type="text" name="option_e" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>F选项</label>
                                    <input type="text" name="option_f" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>正确答案</label>
                                    <div class="dropdown bootstrap-select form-control">
                                        <select name="answer" class="selectpicker form-control" data-style="py-0"
                                            multiple size="5">
                                            <option value="A" selected>A选项</option>
                                            <option value="B">B选项</option>
                                            <option value="C">C选项</option>
                                            <option value="D">D选项</option>
                                            <option value="E">E选项</option>
                                            <option value="F">F选项</option>
                                        </select>
                                    </div>
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>题目类型</label>
                                    <div class="dropdown bootstrap-select form-control">
                                        <select name="category" class="selectpicker form-control" data-style="py-0">
                                            <option value="基础护理学" selected>基础护理学</option>
                                            <option value="内科护理学">内科护理学</option>
                                            <option value="外科护理学">外科护理学</option>
                                            <option value="妇产科护理学">妇产科护理学</option>
                                            <option value="儿科护理学">儿科护理学</option>
                                            <option value="医学伦理学">医学伦理学</option>
                                        </select>
                                    </div>
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>答案描述</label>
                                    <textarea name="description" class="form-control" id="exampleFormControlTextarea1"
                                        rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary mr-2">添加</button>
                        <button type="reset" class="btn btn-danger">重置</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js_code %}
<script>
    $(document).ready(function () {
        $('#add_form').submit(function (e) {
            e.preventDefault();
            $.ajax({
                url: "{% url 'exercise:add' %}",
                method: 'post',
                headers: { 'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val() },
                data: $(this).serialize(),
                success: function (response) {
                    if (response.code === 1) {
                        alert('添加成功');
                        window.location.reload();
                    } else {
                        alert('添加失败');
                        window.location.reload();
                    }
                }
            })
        })
    })
</script>
{% endblock %}